<template>
    <div>
        <el-container>
            <el-header height="56px">小U商城大型后台管理系统
                <div class="top">欢迎VIP: {{ $store.getters.getUser.username }}
                </div>
                <div class="bottom">
                    <el-button type="danger" size="mini" @click="logout">退出登录</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="256px">
                    <v-nav></v-nav>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import vNav from '../components/vNav.vue'
export default {
    data() {
        return {

        }
    },
    methods: {
        logout() {
            this.$store.dispatch('changeUserAction', false)
            this.$router.push('/login')
        }
    },
    components:{vNav}
}
</script>

<style lang="less" scoped>
.el-header {
    background-color: rgb(0, 132, 255);
    color: #fff;
    font-size: 18px;
}
.top{
    display: flex;
    justify-content: right;
    margin-top:-30px;
}
.bottom{
    display: flex;
    justify-content: right;
}
</style>